<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">


    <body>
        <ui:composition template="./templates/default.xhtml">         

            <ui:define name="content">

                <link rel="stylesheet" type="text/css" href="resources/css/default.css"/>

                <h:form binding="#{profileManagerBean.loadProfile}">
                    
                    <p:panel header="Personal information" id="employeeInfo">
                        <font class="fieldNote">*- Mandatory Field<br/><br/></font>
                        <table>
                            <tr>
                                <td>User ID:</td>
                                <td> <b><h:outputText id ="userid" value="#{profileManagerBean.userId}"  /></b>
                                </td>
                            </tr>      
                            <tr>
                                <td>Employee Name:</td>
                                <td> <b><h:outputText id ="name" value="#{profileManagerBean.name}"  /></b>
                                </td>
                            </tr>
                              <tr>
                                <td>D.O.B:</td>
                                <td> 
                                    <h:outputText id ="dob" value="#{profileManagerBean.dob}"  >
                                         <f:convertDateTime pattern="dd-MMM-yyyy"/>
                                    </h:outputText>
                                    </td>
                            </tr>
                            <tr>
                                <td>Department:</td>
                                <td><h:outputText id ="department" value="#{profileManagerBean.department}"  />                                                                                                                                                               
                                </td>
                            </tr>

                            <tr>
                                <td>Designation:</td>
                                <td> <h:outputText id ="designation" value="#{profileManagerBean.designation}"  />  
                                </td>
                            </tr>

                            <tr>
                                <td></td>
                                <td></td>

                            </tr>

                        </table>
                        <font color="red">* Please contact administrator if you need to change any of above information. </font>
                    </p:panel>
                    <p:panel header="Contact information" id="employeeContact">
                    <p:messages/>
                        <table>

                            <tr>
                                <td>Contact No. (Office):</td>
                                <td><p:inputText label="Contact No. (Office)" required="true" id="office" requiredMessage="Office Contact Required" value="#{profileManagerBean.contactOffice}" validatorMessage="Contact No. (Office) Must Have a Minimum of 8 Digits"> 
                                        <f:validateLength minimum="8"/>
                                    </p:inputText>
                                    <font class="fieldNote">* Min. 8</font> 

                                </td>
                            </tr>
                            <tr>
                                <td>Contact No. (Mobile):</td>
                                <td>
                                    <p:inputText label="Contact No. (Mobile)"  required="true" id="mobile" requiredMessage="Mobile contact Required" validatorMessage="Contact No. (Mobile) Must Have a Minimum of 8 Digits" value="#{profileManagerBean.contactMobile}" > 
                                        <f:validateLength minimum="8"/>
                                    </p:inputText> 
                                    <font class="fieldNote">* Min. 8</font> 

                                </td>
                            </tr>
                            <tr>
                                <td>Email Address:</td>
                                <td>
                                    <p:inputText  required="true" id="address" requiredMessage="Email address Required" validatorMessage="Invaild Email Address Format" value="#{profileManagerBean.emailAddress}" > 
                                    <f:validateRegex pattern="^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$" />
                                    </p:inputText> 
                                    <font class="fieldNote">*</font>

                                </td>
                            </tr>

                            <tr >
                                <td></td>
                                <td><p:commandButton id="btnSave" value ="Save changes" actionListener="#{profileManagerBean.updateProfile}" update="employeeContact" ajax="true"/></td>
                            </tr>

                        </table>

                    </p:panel>
                   
                    <p:panel header="Password" id="employeePwd">
                        <table>
                            <tr>
                                <td>Password Expire on:</td>
                                <td><h:outputText id ="passwordExpiry" value="#{profileManagerBean.passwordExpiry}"  >
                                    <f:convertDateTime pattern="dd-MMM-yyyy"/>
                                    </h:outputText>
                                    <a href="changePassword.xhtml">change</a>
                                </td>
                            </tr>
                        </table>
                    </p:panel>

                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/> 
                    <br/>
                    <br/>
                    <br/>
                    <br/>
          
              

                </h:form>

            </ui:define>        

        </ui:composition>
        
    </body>
    



</html>

